<template>
    <div>
          <!-- 头部导航 -->
        <div class="navbar">
            <img class="tb" src="/img/fh.png" alt="" @click="onClickLeft">
            <span>宠物寄养</span>
        </div>
        <!-- 添加地址 -->
         <div class="address" @click="address">
             <span class="span">点击添加服务地址</span>
             <img src="/img/y.png"  alt="">
         </div>
         <div class="center">
         <!-- 服务宠物 -->
         <div class="wm">
                <h2>服务宠物</h2>
                <img src="/img/tj.png" alt="" @click="goCDcard">
                <span>添加宠物</span>
          </div>
            <!--日期  -->
            <van-cell title="服务日期"  :value="date" @click="show = true" />
            <van-calendar v-model="show" color="#f8e176" type="range" @confirm="onConfirm" />
            <img class="y" src="/img/y.png" alt="" >
            <span class="s" v-if="!this.date">请选择服务日期</span>
            <!-- 服务备注 -->
            <div class="bz" @click="gobz">
                <h2>服务备注</h2>
               <img class="y1" src="/img/y.png" alt="" >
               <span class="s1" v-if="!this.date">已填写</span>
          </div>
          <img class="xz" src="/img/xz.jpg" alt="">
         </div>
            <!--底部预定部分 -->
        <van-goods-action>
            <van-goods-action-icon  text="合计：" />
            <span class="s2">￥{{price}}</span>
            <van-goods-action-button color="#f8e176" type="warning"  text="去支付" />
        </van-goods-action>
    </div>
</template>

<script>
    export default {
         data() {
            return {
                date: '',
                day: 0,
                show: false,
                price:0
            }
        },
        methods: {
            //服务备注页面
            gobz(){
                 this.$router.push('/bz')
            },
            //跳转到上一页
            onClickLeft() {
                this.$router.go(-1)
            },
            //跳转到添加地址页面
            address(){
                this.$router.push('/address')
            },
            //舔砖宠物档案
            goCDcard(){
                this.$router.push('/cdcard')
            },
            // 日期
            formatDate(date) {
                return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
            },
            //日期选择后触发
            onConfirm(date) {
                const [start, end] = date;
                 this.day = `${new Date(this.formatDate(end)).getTime() - new Date(this.formatDate(start)).getTime()}`;
                //  this.day = `${this.formatDate(end).slice(8,10) - this.formatDate(start).slice(8,10)+1}`;
                console.log('dayddddd',this.day);
                var day1=(this.day/1000)/(24*60*60)
                console.log(day1);
                this.show = false;
                this.date = `${this.formatDate(start)} - ${this.formatDate(end)}  共${day1}天`;

            },
        },
        
    }
</script>


<style lang="scss" src="../../assets/css/catshopping.scss" scoped>

</style>